<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../before/css/common.css" rel="stylesheet"  type="text/css" />
    <link href="../before/css/style.css" rel="stylesheet" type="text/css" />
<link href="../before/fonts/iconfont.css" rel="stylesheet" type="text/css" />
<link href="../before/css/Orders.css" rel="stylesheet" type="text/css" />
    <script src="../after/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../after/js/vue/vue.min.js"></script>
<script src="../before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="../before/js/common_js.js" type="text/javascript"></script>
<script src="../before/js/footer.js" type="text/javascript"></script>
<script src="../before/js/jquery.jumpto.js" type="text/javascript"></script>
<title>用户地址管理</title>
</head>
<script>
    var getUser = function() {
        $.ajax({
            url : "/address/getUser.do",
            type : "POST",
            dataType : "json",
            success : function(msg) {
                console.log(msg)
                if(msg.hashMap.user==null){
                    top.location.href="HJHStageLogin.ftl";
                }
            }
        });
    }
    getUser();

</script>
<body>


<!--内页样式-->

    <!--地址管理-->
     <div class="user_address">
        <div class="title_name"> <span class="name">地址管理</span></div>
        <div id="app" class="Address_List clearfix container">


        <!--地址类表-->
           <ul class="Address_info"  v-for="(item,index) in result">
            <div  class="address_title"  :name="item.id"><a href="#"   :name="item.id" onclick="update(this)" class="modify" title="修改信息"></a>地址信息 <a href="#" onclick="del(this.name)"  :name="item.id" class="delete "><i class="iconfont icon-close"></i></a></div>
            <li>{{item.uname}}</li>
            <li>{{item.address}}</li>
            <li>{{item.phone}}</li>
           </ul>

        </div>
        <!--添加地址样式-->
          <script src="../before/Threelinkage/kit.js"></script>
		<!--[if IE]>
		<script src="../before/Threelinkage/ieFix.js"></script>
		<![endif]-->
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30210234-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();

		</script>
		<script src="../before/Threelinkage/dom.js"></script>
		<script src="../before/Threelinkage/event.js"></script>
		<script src="../before/Threelinkage/TreeDict.js"></script>
		<script src="../before/Threelinkage/form.js"></script>
		<script src="../before/Threelinkage/combobox.js"></script>
		<script src="../before/Threelinkage/suggestselect.js"></script>
		<script src="../before/Threelinkage/list.js"></script>
		<!--json data-->
		<script src="../before/Threelinkage/json-data.js" charset="utf-8"></script>
        <link href="../before/Threelinkage/linkage.css" rel="stylesheet"  type="text/css"/>

        <div class="Add_Addresss">
             <div class="title_name"><i></i><span id="xiugaidizhi">添加地址</span></div>
             <table>
              <tr>
               <td class="label_name">收货地址</td>
               <td colspan="3" class="select">
                   <form class="form-inline">
                       <div  id="distpicker">
                           <select id="province"></select>
                           <select id="shi"></select>
                           <select  id="xian"></select>
                               详细地址：<input type="text" name="xiangxi" id="xiangxi"/><span id="xiangxidizhi"></span>
                       </div>
                   </form>
               </td>
               </tr>
              <tr>
                  <td class="label_name">收件人姓名</td><td><input name="" type="text"  id="name1" class="Add-text"/><i>（必填）</i><span id="username1"></span></td>
             
              </tr>
      
                 <tr><td class="label_name">手&nbsp;&nbsp;机</td><td><input name="" id="phone" type="text"  class="Add-text"/><i>（必填）</i><span id="dianhua"></span></td></tr>
                  
             </table>
             <div class="address_Note"><span>注：</span>请乎用假名填写地址，如造成损失由收货人自己承担。</div>
             <div class="btn"><button class="Add_btn" style="margin-right: 100px;" onclick="add()" id="but">添加地址</button>
             
         </div>

     </div>
   </div>
</div>
</div>
<script src="../before/js/distpicker.data.js"></script>
<script src="../before/js/distpicker.js"></script>
</body>
</html>
<script>
    var id3;

function update(obj){

    var temp=obj;
    id3=obj.name;
    $("#xiugaidizhi").html("修改地址");
    $("#but").html("保存");
    $("#but").attr("onclick","update1();");
   $("#name1").val($(temp).parent().next().html());
   $("#phone").val($(temp).parent().next().next().next().html());
}
function update1() {

    var sheng= $("#province").find("option:selected").text();
    var shi=$("#shi").find("option:selected").text();
    var xian=$("#xian").find("option:selected").text();
    var xiangxi=$("#xiangxi").val();
    var dizhi=sheng+shi+xian+xiangxi;
    if ($("#name1").val() == null || $("#name1").val() == "") {
        $("#username1").html("姓名不能为空")
    }
    if ($("#phone").val() == null || $("#phone").val() == "") {
        $("#dianhua").html("电话不能为空")
    }
    if ($("#name1").val() != null && $("#name1").val() != ""&& $("#phone").val() != "" && $("#phone").val()!=null) {
        $.ajax({
            url: "/address/update.do",
            type: "POST",
            dataType: "json",
            data: {
                id:id3,
                name: $("#name1").val(),
                dizhi: dizhi,
                phone: $("#phone").val()

            },
            error: function () {
                alert("添加失败");
            },
            success: function (msg) {
                getUserPageList();
                succ1();
                huifu();
            }
        })
    }
}

function succ1(){

    $("#xiugaidizhi").html("添加地址");
    $("#but").html("添加");
    $("#but").attr("onclick","add();");
    $("#name1").val("");
    $("#phone").val("");
}

 function huifu(){
    $("#distpicker").distpicker({
        autoSelect: false
    });}
huifu();
    function add(){

        if($("#name1").val()==null||$("#name1").val()==""){
   $("#username1").html("姓名不能为空")
        }
        if($("#phone").val()==null||$("#phone").val()==""){
            $("#dianhua").html("电话不能为空")
        }
          var sheng= $("#province").find("option:selected").text();
        var shi=$("#shi").find("option:selected").text();
        var xian=$("#xian").find("option:selected").text();
        var xiangxi=$("#xiangxi").val();
        var dizhi=sheng+shi+xian+xiangxi;
        if($("#xiangxi").val()!=null && $("#xiangxi").val()!="" && $("#name1").val() != null && $("#name1").val() != ""&& $("#phone").val() != "" && $("#phone").val()!=null){
            $.ajax({
                url : "/address/add.do",
                type : "POST",
                dataType : "json",
                data : {
                    name:$("#name1").val(),
                    dizhi:dizhi,
                    phone:$("#phone").val()

                },
                error:function () {
                    alert("添加失败");
                },
                success : function(msg) {
                    getUserPageList();
                    huifu();

                }

            })
        }

    }
    function del(obj){
        $.ajax({
            url : "/address/dell.do",
            type : "POST",
            dataType : "json",
            data : {
                id:obj
            },
            error:function () {
                alert("删除失败");
            },
            success : function(msg) {
                getUserPageList();
            }

        })
    }

    var app = new Vue({
        el : '#app',
        data : {
            result : []
        }
    });
    //查询用户数据
    var getUserPageList = function(curr) {
        $.ajax({
            url : "/address/getaddress.do",
            type : "POST",
            dataType : "json",
            data : {
                id:1
            },
            success : function(msg) {
                app.result=msg.addressList;
                console.log(msg)
            }
        });
    }


    getUserPageList();
		</script>